<template>
  <div>
    <div class="box">
      <div ref="vantaRef" style="width: 100%;height: 100vh ">

      </div>
    </div>
  </div>
</template>

<script>
import * as THREE from "three";
import WAVES from "vanta/src/vanta.waves";

export default {
  name: "Page2",
  data() {
    return {};
  },
  mounted() {
    this.vantaEffect = WAVES({
      el: this.$refs.vantaRef,
      THREE: THREE,
    });
    // 修改颜色时 cells 需要全大写字母 可生效
    VANTA.WAVES({
      el: this.$refs.vantaRef,
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.0,
      minWidth: 200.0,
      scale: 1.0,
      // color1: 14381274,
      // color2: 16443110,
    });
  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy();
    }
  },
}
</script>

<style scoped>
.box {
  position: relative;

}

</style>
